<template>
  <div class="game-info">
    <div class="info-row">
      <div class="score">得分: {{ score }}/{{ targetScore }}</div>
      <div class="moves">剩余步数: {{ moves }}</div>
    </div>
    <div class="info-row">
      <div class="timer" :class="{ 'timer-warning': timeLeft <= 10, 'timer-critical': timeLeft <= 5 }">
        ⏰ 时间: {{ formatTime(timeLeft) }}
      </div>
      <div class="status">
        {{ gameStatus }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameInfo',
  props: {
    score: {
      type: Number,
      required: true
    },
    moves: {
      type: Number,
      required: true
    },
    timeLeft: {
      type: Number,
      required: true
    },
    targetScore: {
      type: Number,
      required: true
    },
    gameStarted: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    gameStatus() {
      if (!this.gameStarted) {
        return '点击开始游戏'
      } else if (this.score >= this.targetScore) {
        return '🎉 达成目标！'
      } else if (this.timeLeft <= 10) {
        return '⚡ 时间紧迫！'
      } else {
        return '努力达成目标'
      }
    }
  },
  methods: {
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins}:${secs.toString().padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.game-info {
  margin-bottom: 20px;
  font-weight: bold;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 16px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.score {
  color: #e74c3c;
}

.moves {
  color: #3498db;
}

.timer {
  color: #27ae60;
  transition: all 0.3s ease;
}

.timer-warning {
  color: #f39c12;
  animation: pulse 1s infinite;
}

.timer-critical {
  color: #e74c3c;
  animation: flashWarning 0.5s infinite;
}

.status {
  color: #8e44ad;
  font-size: 14px;
  font-style: italic;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes flashWarning {
  0%, 100% { 
    color: #e74c3c; 
    text-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
  }
  50% { 
    color: #ff6b6b; 
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
  }
}
</style> 